<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 页面标题区域 -->
    <div class="bg-white shadow-sm border-b border-gray-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-900 mb-4">产品中心</h1>
          <nav class="flex justify-center" aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2 text-sm text-gray-500">
              <li><a href="#" class="hover:text-blue-600">首页</a></li>
              <li><span class="mx-2">/</span></li>
              <li class="text-gray-900">产品中心</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="flex flex-col lg:flex-row gap-8">
        <!-- 侧边栏筛选 -->
        <div class="lg:w-1/4">
          <div class="bg-white rounded-lg shadow-sm p-6 sticky top-8">
            <!-- 产品分类 -->
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-gray-900 mb-4">产品分类</h3>
              <div class="space-y-3">
                <label v-for="category in categories" :key="category.id" class="flex items-center">
                  <input 
                    type="checkbox" 
                    :value="category.id" 
                    v-model="selectedCategories"
                    class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  >
                  <span class="ml-3 text-gray-700">{{ category.name }}</span>
                  <span class="ml-auto text-sm text-gray-500">({{ category.count }})</span>
                </label>
              </div>
            </div>

            <!-- 价格范围 -->
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-gray-900 mb-4">价格范围</h3>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm text-gray-600 mb-2">最低价格</label>
                  <input 
                    type="number" 
                    v-model="priceRange.min" 
                    placeholder="0"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                  >
                </div>
                <div>
                  <label class="block text-sm text-gray-600 mb-2">最高价格</label>
                  <input 
                    type="number" 
                    v-model="priceRange.max" 
                    placeholder="无限制"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                  >
                </div>
              </div>
            </div>

            <!-- 排序方式 -->
            <div class="mb-8">
              <h3 class="text-lg font-semibold text-gray-900 mb-4">排序方式</h3>
              <select 
                v-model="sortBy" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="default">默认排序</option>
                <option value="price-asc">价格从低到高</option>
                <option value="price-desc">价格从高到低</option>
                <option value="name">名称排序</option>
                <option value="newest">最新产品</option>
                <option value="popular">热门产品</option>
              </select>
            </div>

            <!-- 重置筛选 -->
            <button 
              @click="resetFilters"
              class="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors duration-200"
            >
              重置筛选
            </button>
          </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="lg:w-3/4">
          <!-- 搜索和视图切换 -->
          <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
              <!-- 搜索框 -->
              <div class="relative flex-1 max-w-md">
                <input 
                  type="text" 
                  v-model="searchQuery"
                  placeholder="搜索产品..."
                  class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                >
                <svg class="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>

              <!-- 视图切换 -->
              <div class="flex items-center space-x-2">
                <span class="text-sm text-gray-600">视图：</span>
                <button 
                  @click="viewMode = 'grid'"
                  :class="[viewMode === 'grid' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600', 'p-2 rounded-md transition-colors duration-200']"
                >
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                  </svg>
                </button>
                <button 
                  @click="viewMode = 'list'"
                  :class="[viewMode === 'list' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600', 'p-2 rounded-md transition-colors duration-200']"
                >
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
                  </svg>
                </button>
              </div>
            </div>
          </div>

          <!-- 产品结果统计 -->
          <div class="mb-6">
            <p class="text-gray-600">
              共找到 <span class="font-semibold text-gray-900">{{ filteredProducts.length }}</span> 个产品
            </p>
          </div>

          <!-- 产品网格/列表 -->
          <div v-if="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
            <div 
              v-for="product in paginatedProducts" 
              :key="product.id" 
              class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-lg transition-all duration-300 group"
            >
              <div class="relative overflow-hidden">
                <img 
                  :src="product.image" 
                  :alt="product.name" 
                  class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                >
                <div class="absolute top-4 right-4">
                  <span v-if="product.isNew" class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">新品</span>
                  <span v-if="product.isHot" class="bg-red-500 text-white text-xs px-2 py-1 rounded-full ml-1">热销</span>
                </div>
              </div>
              <div class="p-6">
                <div class="mb-2">
                  <span class="text-sm text-blue-600 font-medium">{{ product.category }}</span>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-200">
                  {{ product.name }}
                </h3>
                <p class="text-gray-600 mb-4 line-clamp-2">{{ product.description }}</p>
                <div class="flex items-center justify-between">
                  <div class="text-2xl font-bold text-blue-600">
                    ¥{{ product.price.toLocaleString() }}
                  </div>
                  <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200">
                    查看详情
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 列表视图 -->
          <div v-else class="space-y-6">
            <div 
              v-for="product in paginatedProducts" 
              :key="product.id" 
              class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-lg transition-shadow duration-300"
            >
              <div class="flex flex-col md:flex-row">
                <div class="md:w-1/3">
                  <img 
                    :src="product.image" 
                    :alt="product.name" 
                    class="w-full h-48 md:h-full object-cover"
                  >
                </div>
                <div class="md:w-2/3 p-6">
                  <div class="flex items-start justify-between">
                    <div class="flex-1">
                      <div class="mb-2">
                        <span class="text-sm text-blue-600 font-medium">{{ product.category }}</span>
                        <span v-if="product.isNew" class="bg-green-500 text-white text-xs px-2 py-1 rounded-full ml-2">新品</span>
                        <span v-if="product.isHot" class="bg-red-500 text-white text-xs px-2 py-1 rounded-full ml-1">热销</span>
                      </div>
                      <h3 class="text-2xl font-semibold text-gray-900 mb-3 hover:text-blue-600 transition-colors duration-200">
                        {{ product.name }}
                      </h3>
                      <p class="text-gray-600 mb-4">{{ product.description }}</p>
                      <div class="flex items-center space-x-4 text-sm text-gray-500">
                        <span>型号：{{ product.model }}</span>
                        <span>功率：{{ product.power }}</span>
                        <span>重量：{{ product.weight }}</span>
                      </div>
                    </div>
                    <div class="text-right ml-6">
                      <div class="text-3xl font-bold text-blue-600 mb-4">
                        ¥{{ product.price.toLocaleString() }}
                      </div>
                      <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md transition-colors duration-200">
                        查看详情
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div class="mt-12 flex justify-center">
            <nav class="flex items-center space-x-2">
              <button 
                @click="currentPage = Math.max(1, currentPage - 1)"
                :disabled="currentPage === 1"
                class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                上一页
              </button>
              
              <button 
                v-for="page in visiblePages" 
                :key="page"
                @click="typeof page === 'number' && (currentPage = page)"
                :class="[
                  page === currentPage 
                    ? 'bg-blue-600 text-white border-blue-600' 
                    : 'bg-white text-gray-500 border-gray-300 hover:bg-gray-50',
                  'px-3 py-2 text-sm font-medium border rounded-md'
                ]"
              >
                {{ page }}
              </button>
              
              <button 
                @click="currentPage = Math.min(totalPages, currentPage + 1)"
                :disabled="currentPage === totalPages"
                class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                下一页
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

// 响应式数据
const searchQuery = ref('')
const selectedCategories = ref<number[]>([])
const priceRange = ref({ min: null as number | null, max: null as number | null })
const sortBy = ref('default')
const viewMode = ref<'grid' | 'list'>('grid')
const currentPage = ref(1)
const itemsPerPage = 12

// 产品分类数据
const categories = ref([
  { id: 1, name: '数控机床', count: 15 },
  { id: 2, name: '工业机器人', count: 12 },
  { id: 3, name: '自动化设备', count: 18 },
  { id: 4, name: '精密仪器', count: 9 },
  { id: 5, name: '检测设备', count: 7 },
  { id: 6, name: '包装机械', count: 11 }
])

// 产品数据
const products = ref([
  {
    id: 1,
    name: 'CNC-5000 数控加工中心',
    description: '高精度五轴数控加工中心，适用于复杂零件的精密加工，具有高效率、高精度的特点。',
    price: 850000,
    category: '数控机床',
    categoryId: 1,
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=CNC%20machining%20center%205-axis%20precision%20manufacturing%20equipment%20industrial%20setting&image_size=landscape_4_3',
    isNew: true,
    isHot: false,
    model: 'CNC-5000',
    power: '15kW',
    weight: '3500kg'
  },
  {
    id: 2,
    name: 'AR-6000 工业机器人',
    description: '六轴工业机器人，负载能力强，精度高，适用于焊接、搬运、装配等多种工业应用。',
    price: 320000,
    category: '工业机器人',
    categoryId: 2,
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=6-axis%20industrial%20robot%20arm%20welding%20assembly%20automation%20factory&image_size=landscape_4_3',
    isNew: false,
    isHot: true,
    model: 'AR-6000',
    power: '5kW',
    weight: '180kg'
  },
  {
    id: 3,
    name: 'AL-3000 自动化生产线',
    description: '完整的自动化生产线解决方案，包含输送、检测、包装等多个环节，大幅提升生产效率。',
    price: 1200000,
    category: '自动化设备',
    categoryId: 3,
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=automated%20production%20line%20conveyor%20system%20industrial%20automation%20manufacturing&image_size=landscape_4_3',
    isNew: true,
    isHot: true,
    model: 'AL-3000',
    power: '25kW',
    weight: '8000kg'
  },
  {
    id: 4,
    name: 'PM-2000 精密测量仪',
    description: '高精度三坐标测量机，用于零件尺寸检测和质量控制，测量精度达到微米级别。',
    price: 450000,
    category: '精密仪器',
    categoryId: 4,
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=precision%20coordinate%20measuring%20machine%20quality%20control%20industrial%20metrology&image_size=landscape_4_3',
    isNew: false,
    isHot: false,
    model: 'PM-2000',
    power: '2kW',
    weight: '1200kg'
  },
  {
    id: 5,
    name: 'QC-1500 质量检测设备',
    description: '自动化质量检测设备，集成多种检测功能，确保产品质量符合标准要求。',
    price: 280000,
    category: '检测设备',
    categoryId: 5,
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=automated%20quality%20inspection%20equipment%20testing%20machine%20industrial%20quality%20control&image_size=landscape_4_3',
    isNew: false,
    isHot: false,
    model: 'QC-1500',
    power: '3kW',
    weight: '800kg'
  },
  {
    id: 6,
    name: 'PK-4000 包装机械',
    description: '高速自动包装机械，适用于各种产品的包装需求，包装速度快，质量稳定。',
    price: 180000,
    category: '包装机械',
    categoryId: 6,
    image: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=high-speed%20packaging%20machinery%20automated%20packaging%20line%20industrial%20equipment&image_size=landscape_4_3',
    isNew: false,
    isHot: true,
    model: 'PK-4000',
    power: '8kW',
    weight: '2500kg'
  }
])

// 筛选后的产品
const filteredProducts = computed(() => {
  let filtered = products.value

  // 搜索筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(product => 
      product.name.toLowerCase().includes(query) ||
      product.description.toLowerCase().includes(query) ||
      product.category.toLowerCase().includes(query)
    )
  }

  // 分类筛选
  if (selectedCategories.value.length > 0) {
    filtered = filtered.filter(product => 
      selectedCategories.value.includes(product.categoryId)
    )
  }

  // 价格筛选
  if (priceRange.value.min !== null) {
    filtered = filtered.filter(product => product.price >= priceRange.value.min!)
  }
  if (priceRange.value.max !== null) {
    filtered = filtered.filter(product => product.price <= priceRange.value.max!)
  }

  // 排序
  switch (sortBy.value) {
    case 'price-asc':
      filtered.sort((a, b) => a.price - b.price)
      break
    case 'price-desc':
      filtered.sort((a, b) => b.price - a.price)
      break
    case 'name':
      filtered.sort((a, b) => a.name.localeCompare(b.name))
      break
    case 'newest':
      filtered.sort((a, b) => (b.isNew ? 1 : 0) - (a.isNew ? 1 : 0))
      break
    case 'popular':
      filtered.sort((a, b) => (b.isHot ? 1 : 0) - (a.isHot ? 1 : 0))
      break
  }

  return filtered
})

// 分页计算
const totalPages = computed(() => Math.ceil(filteredProducts.value.length / itemsPerPage))

const paginatedProducts = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage
  const end = start + itemsPerPage
  return filteredProducts.value.slice(start, end)
})

const visiblePages = computed(() => {
  const pages: (number | string)[] = []
  const total = totalPages.value
  const current = currentPage.value
  
  if (total <= 7) {
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    if (current <= 4) {
      for (let i = 1; i <= 5; i++) {
        pages.push(i)
      }
      pages.push('...', total)
    } else if (current >= total - 3) {
      pages.push(1, '...')
      for (let i = total - 4; i <= total; i++) {
        pages.push(i)
      }
    } else {
      pages.push(1, '...')
      for (let i = current - 1; i <= current + 1; i++) {
        pages.push(i)
      }
      pages.push('...', total)
    }
  }
  
  return pages.filter(page => page !== '...' || pages.indexOf(page) === pages.lastIndexOf(page))
})

// 重置筛选
const resetFilters = () => {
  searchQuery.value = ''
  selectedCategories.value = []
  priceRange.value = { min: null, max: null }
  sortBy.value = 'default'
  currentPage.value = 1
}

// 监听筛选条件变化，重置到第一页
watch([searchQuery, selectedCategories, priceRange, sortBy], () => {
  currentPage.value = 1
}, { deep: true })
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style>